<template>
  <div class="drug-delivery-info">
    <el-tabs class="info-tabs" :value="tabValue">
      <el-tab-pane v-if="operation === 0 || operation === 3" name="0" label="新增出库">
        <deliveryFrom
          @showExport="onShowExport"
          :deliveryId="deliveryId"
          :operation="operation"
          ref="form"
        />
      </el-tab-pane>
      <el-tab-pane v-if="operation === 1" name="1" label="出库编辑">
        <deliveryFrom
          @showExport="onShowExport"
          :deliveryId="deliveryId"
          :operation="operation"
          ref="form"
        />
      </el-tab-pane>
      <el-tab-pane v-if="operation === 2" name="2" label="出库明细">
        <deliveryFrom
          @showExport="onShowExport"
          :deliveryId="deliveryId"
          :operation="operation"
          :readOnly="true"
          ref="form"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="dialog-footer">
      <template v-if="operation != 2">
        <el-button :loading="loading" @click="onSubmit(1)">保存</el-button>
        <el-button :loading="loading" @click="onSubmit(2)">出库</el-button>
      </template>
      <template v-if="showExport">
        <el-button :loading="loading" @click="onOutDelivery">导出出库单</el-button>
      </template>
      <el-button @click="$emit('close')">返回</el-button>
    </div>
  </div>
</template>

<script>
import { addDrugDelivery, outDelivery } from '@/api/storageRoom/drugDelivery';
import { parseTime, formatMoney } from "@/utils/index";
import deliveryFrom from "./deliveryFrom";

export default {
  name: "deliveryInfo",
  inheritAttrs: false,
  props: {
    // 0-新增,1-编辑,2-查看,3-即将过期药品出库
    operation: {
      type: Number,
      default: 0
    },
    deliveryId: {
      type: Number,
      default: 0
    }
  },
  components: { deliveryFrom },
  data() {
    return {
      successMsg: {
        1: "保存成功！",
        2: "出库成功！"
      },
      showExport: false,
      loading: false,
    };
  },
  computed: {
    tabValue() {
      return this.operation === 3 ? "0" : this.operation + "";
    }
  },
  methods: {
    parseTime,
    formatMoney,
    onSubmit(status) {
      let postParam = this.$refs.form.getPostParam();
      if(postParam.list.length === 0) {
        this.$message.error('您还未添加药品');
        return;
      }
      this.$refs.form.validate((error, fileds) => {
        
        if(error) {
          this.$message.error('您还有未填写完成的信息!');
          return;
        }
        postParam.status = status;
        this.loading = true;
        addDrugDelivery(postParam).then(() => {
          this.loading = false;
          this.$notify({
            title: this.successMsg[status],
            type: "success"
          });
          this.$emit("success");
        }).catch(() => {
          this.loading = false;
        });
      });
    },
    // 导出出库单
    onOutDelivery() {
      let postParam = this.$refs.form.getPostParam();
      let id = postParam.id;
      this.loading = true;
      outDelivery({id}, () => {
        this.loading = false;  
      });
    },
    onShowExport(val) {
      this.showExport = val;
    }
  }
}
</script>

<style>
.drug-delivery-info {
  height: 600px;
  width: 100%;
}

.drug-delivery-info .info-tabs {
  height: 570px;
  width: 100%;
}

.drug-delivery-info .info-tabs .el-tabs__content {
  height: calc(100% - 40px);
}

.drug-delivery-info .info-tabs .el-tabs__content .el-tab-pane {
  height: 100%;
}

.drug-delivery-info .dialog-footer {
  text-align: right;
}
</style>